<template>
    <div class="match-activity-wrapper full-wrapper mint-header-pa">
        <mt-header fixed :title="dTitle">
            <div slot="left">
                <mt-button @click="pageBack" icon="back"></mt-button>
            </div>
        </mt-header>
        <router-view></router-view>
        <div class="common-footer">
            <router-link v-for="(v,i) in FOOTER_NAV"
                         :to="v.path"
                         tag="div"
                         active-class="common-footer-selected"
                         :key="i"
                         @click.native="changeTab(v)">
                {{v.name}}
            </router-link>
        </div>
    </div>
</template>

<script>
    // import axios from 'axios'
    import {FOOTER_NAV} from "@/common/constants";

    export default {
        name: "MatchActivityIndex",
        data() {
            return {
                dTitle: "发现好友",
                FOOTER_NAV
            }
        },
        created() {

        },
        methods: {
            pageBack() {
                this.$router.go(-1);
            },
            changeTab(tab) {
                this.dTitle = tab.dTitle;
            }
        }
    }
</script>

<style>
    /*重写寻找球友中title样式*/
    .match-activity-wrapper .mint-header-title {
        font-size: 16px;
        font-weight: 400;
        font-family: PingFang SC;
    }

    .match-activity-wrapper.mint-header-pa {
        padding-top: 40px;
    }

    .match-activity-wrapper .vue-scroll {
        height: 100%;

    }

    .match-activity-wrapper {
        font-size: 12px;
        color: #0D0D0D;
        padding-bottom: 42px;
        font-family: STSong;
    }

    .match-activity-wrapper div,
    .match-activity-wrapper span {
        box-sizing: border-box;
    }

    .ma-header-img {
        display: inline-block;
        width: 27px;
        height: 27px;
        border: 1px solid #707070;
        background-color: #FFFFFF;
        border-radius: 50%;
        overflow: hidden;
    }
    .ma-header-img img{
        width: 90%;
        height: 90%;
    }

    .find-teammate-title {
        position: absolute;
        height: 40px;
        width: 100%;
        top: 40px;
        text-align: center;
        padding-right: 40px;
        line-height: 40px;
        background-color: #FCFCFC;

    }

    .ma-sub-title {
        position: absolute;
        height: 40px;
        width: 100%;
        top: 40px;
        text-align: center;
        padding-right: 40px;
        line-height: 40px;
        background-color: #FCFCFC;
    }

    .find-teammate-sub-title {
        height: 30px;
        width: 100%;
        line-height: 30px;
        text-align: center;
    }

    /*footer START*/
    .common-footer {
        display: flex;
        position: fixed;
        width: 100%;
        bottom: 0;
        justify-content: space-around;
        border-top: 1px solid #C9C9C9;
        height: 42px;
    }

    .common-footer div {
        cursor: pointer;
        line-height: 22px;
        padding: 10px;
    }

    .common-footer-selected {
        color: #1d90bf;
    }

    /*footer END*/

    .ellipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
